<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#box{width: 500px;height: 400px;border:1px solid gray;position: relative;float: left;}
		.on{width: 50px;height: 50px;background:black;}
		#box .on{
			animation:play 2s 10s  forwards;
			position:absolute;
			}/*cubic-bezier(.37,-0.59,.7,1.55)*/
		/* 动画play 过渡时间2s 延迟1秒执行 重复3次 alternate动画返回执行 forwards动画执行完后停留在执行完的状态*/
		/*@-webkit-keyframes play {
			0% {left: 0;top: 0;  }
			100% { left: 100px;top: 100px; }
		}
		@-o-keyframes play {
			0% {left: 0;top: 0;  }
			100% { left: 100px;top: 100px; }
		}
		@-moz-keyframes play {
			0% {left: 0;top: 0;  }
			100% { left: 100px;top: 100px; }
		}*/
		@keyframes play {
			0% {left: 0;top: 0;  }
			50%{left: 100px;top: 0;}
			100% { left: 100px;top: 100px;}
		}
	#box:hover .on{animation-play-state: paused;}/*暂停动画*/

/*//////////////////////////////*/
#box2{width: 100px;height: 100px;border:1px solid gray;float: left;
	animation: plays 1s 3  steps(1) ;/*steps(1)帧动画 直接变而不是过渡效果*/
}
@keyframes plays{
	20%{background: red;}
	40%{background: blue;}
	60%{background: yellow;}
	80%{background: gray;}
	100%{background: pink;}

}

	</style>
</head>
<body>
	<div id="box">
		<div class="on"></div>
	</div>

	<div id="box2"></div>
</body>
</html>